<script setup lang="ts">
interface TableData {
  name: string;
  age: number;
  address: string;
  [key: string]: string | number;
}

interface Props {
  config?: {
    title?: string;
    bordered?: boolean;
    columns?: Array<{ key: string; title: string }>;
    data?: TableData[];
  };
}

withDefaults(defineProps<Props>(), {
  config: () => ({
    title: "表格标题",
    bordered: true,
    columns: [
      { key: "name", title: "姓名" },
      { key: "age", title: "年龄" },
      { key: "address", title: "地址" },
    ],
    data: [
      { name: "张三", age: 25, address: "北京市" },
      { name: "李四", age: 30, address: "上海市" },
    ],
  }),
});
</script>

<template>
  <div class="table-component">
    <h4 v-if="config.title" class="text-lg mb-2">{{ config.title }}</h4>
    <table :class="{ 'border-collapse': true, border: config.bordered }">
      <thead>
        <tr>
          <th v-for="col in config.columns" :key="col.key" class="p-2 border">
            {{ col.title }}
          </th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(row, index) in config.data" :key="index">
          <td v-for="col in config.columns" :key="col.key" class="p-2 border">
            {{ row[col.key] }}
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<style scoped>
.table-component {
  @apply w-full;
}
table {
  @apply w-full;
}
th {
  @apply bg-gray-100 font-medium;
}
</style>
